@list: #fa4140,
#ff5b28,
#ff7427,
#b224d1,
#ea2888,
#b224d1,
#842aff,
#7d89ff,
#4f96ff,
#15badf,
#09d8bd;
.buy_beeans {
    padding-bottom: 3.4rem;
    &__bar {
        background: initial;
        z-index: 1;
        color: #fff;
        text-align: center;
        font-size: 0.95rem;
        position: fixed;
        .mk_nav_bar_title {
            color: #333333;
        }
        .mk_nav_bar_right {
            .mk_icon {
                font-size: 1.4rem;
            }
        }
    }
    &_header {
        position: relative;
        img {
            height: 14.25rem;
            width: 100%;
            display: block;
        }
        &__my {
            position: absolute;
            height: 5.5rem;
            top: 50%;
            width: 100%;
            transform: translate(0, -50%);
            .title {
                font-size: 0.8rem;
                color: #fff;
                text-align: center;
                margin-bottom: 0.6rem;
            }
            .number {
                font-size: 0.9rem;
                height: 1.5rem;
                width: 5.45rem;
                background: #fef5cf;
                border-radius: 0.75rem;
                color: #fb6e14;
                margin: 0 auto;
                position: relative;
                &::after {
                    content: "";
                    width: 0;
                    height: 0;
                    border-left: 0.4rem solid transparent;
                    border-right: 0.4rem solid transparent;
                    border-top: 0.3rem solid #fef5cf;
                    position: absolute;
                    bottom: -0.3rem;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
        }
        &_draws {
            position: absolute;
            bottom: 0;
            box-sizing: border-box;
            width: calc(100% - 0.7rem);
            border-radius: 0.35rem 0.35rem 0 0;
            margin: 0 0.35rem;
            height: 2.5rem;
            padding: 0 0.35rem;
            background: #fff;
            .notice {
                width: 1.15rem;
                height: 1rem;
                margin-right: 0.4rem;
            }
            .label {
                font-size: 0.625rem;
                color: #333333;
                line-height: 1rem;
            }
            .time {
                font-size: 0.625rem;
                color: #999999;
                line-height: 1rem;
            }
        }
    }
    &_gird {
        padding: 0.875rem;
        margin-top: 0;
        position: relative;
        box-shadow: 0 -0.1rem 0.4rem #f2f2f2;
        &__list {
            img {
                height: 2rem;
                width: 2rem;
                display: block;
                margin: 0 auto;
            }
            div {
                font-size: 0.65rem;
                columns: #333333;
                margin-top: 0.5rem;
                color: #333333;
                text-align: center;
            }
        }
        .advert {
            height: 3.2rem;
            display: block;
            width: 100%;
            margin-top: 1rem;
        }
    }
    &_item {
        .mk_gird {
            border-radius: 0.35rem;
            overflow: hidden;
            margin-bottom: 0.35rem;
        }
        &_dis {
            padding: 0.85rem 0;
        }
        padding: 0 0.5rem;
        &__title {
            padding: 0 0.7rem;
            height: 2.6rem;
            position: relative;
            left: -0.7rem;
            width: calc(100% + 1.4rem);
        }
        .tab {
            height: 5.25rem;
            .discount {
                background: #ffeac6;
                height: 1.2rem;
                width: 5.5rem;
                font-size: 0.6rem;
                color: #cd4f06;
                margin: 0 auto;
                line-height: 1.2rem;
                border-radius: 0.35rem 0.35rem 0 0;
                span {
                    font-size: 0.65rem;
                }
            }
            .info {
                line-height: 1rem;
                color: #fff;
                font-size: 0.65rem;
                padding: 0.7rem 0.65rem 0.3rem 0.65rem;
                span {
                    font-size: 0.75rem;
                }
            }
            &.view_1 {
                background: url(../../assets/buy_01.png) no-repeat;
                margin-right: 0.3rem;
                background-size: 100% 4.85rem;
                background-position-y: 0.3rem;
            }
            &.view_2 {
                background: url(../../assets/buy_02.png) no-repeat;
                margin-left: 0.3rem;
                background-size: 100% 4.85rem;
                background-position-y: 0.3rem;
            }
        }
        &_voucher {
            height: 5.35rem;
            margin-top: 0.65rem;
            border-radius: 0.2rem;
            overflow: hidden;
            position: relative;
            &::after {
                content: "";
                height: 1.6rem;
                width: 1.6rem;
                border-radius: 50%;
                background: #fff;
                position: absolute;
                left: 3.45rem;
                top: -0.8rem;
                border: 0.05rem solid #eaeaea;
                transform: scale(0.5);
            }
            &::before {
                content: "";    
                height: 1.6rem;
                width: 1.6rem;
                border-radius: 50%;
                background: #fff;
                position: absolute;
                left: 3.45rem;
                bottom: -0.8rem;
                border: 0.05rem solid #eaeaea;
                transform: scale(0.5);
            }
            .zhekou {
                text-align: center;
                width: 4.3rem;
                color: #fff;
                .bg-loop(@n, @i: 1) when (@i <=@n) {
                    &.bg_@{i} {
                        background: url('../../assets/buy_@{i}.png');
                        background-size: 100% 100%;
                    }
                    .bg-loop(@n,
                    (@i + 1));
                }
                .bg-loop(11);
                .daze {
                    font-size: 0.8rem;
                    span {
                        font-size: 1.05rem;
                    }
                }
                .label {
                    font-family: 0.6rem;
                    margin-top: 0.7rem;
                }
            }
            .info {
                line-height: 1.2rem;
                margin-left: 0.65rem;
                padding: 0.9rem 0;
                position: relative;
                &::before {
                    content: "";
                    width: 102%;
                    position: absolute;
                    top: -0.05rem;
                    left: -0.2rem;
                    border: 0.05rem solid #eaeaea;
                    transform: scaleY(0.5);
                }
                &::after {
                    content: "";
                    width: 102%;
                    position: absolute;
                    bottom: 0.15rem;
                    left: -0.2rem;
                    border: 0.05rem solid #eaeaea;
                    transform: scaleY(0.5);
                }
                .number {
                    font-size: 0.725rem;
                    color: #333333;
                    span {
                        font-size: 0.8rem;
                    }
                }
                .jine {
                    font-size: 0.65rem;
                    color: #666666;
                    span {
                        color: #fa0000;
                    }
                }
                .time {
                    font-size: 0.55rem;
                    color: #888888;
                }
            }
            .pros {
                padding: 0.4rem;
                padding-top: 0.9rem;
                position: relative;
                &::after {
                    content: "";
                    width: 200%;
                    height: 198%;
                    position: absolute;
                    top: -50% + 0.1rem;
                    border-radius: 0 0.4rem 0.4rem 0;
                    pointer-events: none;
                    left: calc(-50% - 0.05rem);
                    border: 0.05rem solid #eaeaea;
                    border-left: 0;
                    transform: scale(0.5);
                }
                &::before {
                    content: "";
                    width: 0.05rem;
                    height: 200%;
                    position: absolute;
                    top: -50%;
                    pointer-events: none;
                    left: -0.05rem;
                    border-left: 0.05rem dashed #f1f1f1;
                    transform: scale(0.5);
                }
                .intro-loop(@n, @i: 1) when (@i <=length(@n)) {
                    &_@{i} {
                        background: extract(@list, @i);
                        border-color: extract(@list, @i);
                    }
                    .intro-loop(@n, (@i + 1));
                }
                .btn {
                    font-size: 0.55rem;
                    width: 3.1rem;
                    height: 0.9rem;
                    border-radius: 0.45rem;
                    color: #fff;
                    margin: 0 auto;
                    .intro-loop(@list, 1);
                }
            }
            .pro {
                position: relative;
                bottom: 0.1rem;
                &_label {
                    font-size: 0.6rem;
                }
                &_number {
                    font-size: 0.55rem;
                }
            }
        }
    }
    &.buy_beeans_list {
        .am-tabs {
            padding-top: 2.1rem;
        }
        .am-tabs-tab-bar-wrap {
            position: fixed !important;
            width: 100%;
            top: 2.5rem;
            z-index: 1;
        }
        .buy_beeans_item_voucher {
            background: #fff;
            &::after {
                background: #f4f5f7;
            }
            &::before {
                background: #f4f5f7;
            }
        }
        .img_row {
            width: 0.25rem;
            height: 0.5rem;
        }
    }
}

.beans_order {
    &__item {
        height: 2.5rem;
        .mk_item_title {
            width: 4.25rem;
            flex: none;
            font-size: 0.75rem;
            color: #333333;
        }
        .mk_item_right {
            flex: 1;
            font-size: 0.75rem;
            color: #333333;
            img {
                height: 0.6rem;
                width: 0.6rem;
                margin-left: 0.3rem;
            }
        }
    }
    &__info {
        height: 2.5rem;
        &::after {
            height: 0;
        }
        .mk_item_title {
            font-size: 0.75rem;
            color: #333333;
        }
        .mk_item_right {
            font-size: 0.75rem;
            color: #fa0000;
        }
    }
    &__number {
        height: 3rem;
        border: none;
        margin: 0 0.6rem;
        width: calc(100% - 1.2rem);
        font-size: 1.525rem;
        color: #b3b3b3;
        input {
            border-bottom: 0;
        }
    }
    .footer_btn {
        height: 2.65rem;
        font-size: 0.8rem;
        color: #fff;
        background: #fa0000;
        >span {
            font-size: 0.975rem;
        }
    }
}

.beans_order_modal {
    font-size: 0.725rem;
    text-align: left;
    line-height: 1.2rem;
    height: 9rem;
    .title {
        color: #333333;
    }
    .label {
        color: #888888;
    }
}